<template>
  <div class="content">
    <template v-if="type==1">
      <div class="list" v-for="item in list" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="type==2">
      <div class="list" v-for="item in list1" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="type==4">
      <div class="list" v-for="item in list2" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="type==5">
      <div class="list" v-for="item in list3" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="type==3">
      <div class="list" v-for="item in list4" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
    <template v-if="type==6">
      <div class="list" v-for="item in list5" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>

    <template v-if="type==7">
      <div class="list" v-for="item in list6" :key="item.id">
        <div class="count">{{item.number}}</div>
        <div class="name">{{item.name}}</div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "MapCount2",
  props:{
    title:{
      type:String,
      default:''
    },
    detail: Object,
    type:Number
  },
  data(){
    return {
      list:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:158},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:12},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:12},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:161}
      ],
      list1:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:107},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:6},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:6},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:158}
      ],
      list2:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:42},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:11},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:11},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:147}
      ],
      list3:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:52},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:11},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:11},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:142}
      ],
      list4:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:47},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:6},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:6},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:135}
      ],
      list5:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:35},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:5},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:5},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:128}
      ],
      list6:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'报名人数',icon:'icon-caishouzhongliang',number:22},
        {id:3,color:['#30cbf7','#1997e1'],name:'培训机构数',icon:'icon-caishouzhongliang',number:1},
        {id:4,color:['#12f1b8','#0db5e6'],name:'培训专业数',icon:'icon-caishouzhongliang',number:1},
        {id:5,color:['#f7c759','#fb838f'],name:'工种数',icon:'icon-huoche',number:126}
      ]
    }
  },
  methods:{
    // assignment() {
    //   this.list[0].number = this.detail.skill
    //   this.list[1].number = this.detail.train
    //   this.list[2].number = this.detail.video
    //   this.list[3].number = this.detail.workType
    // }
  },
  mounted() {
    //this.assignment()
    console.log(this.type)
  },
  computed:{
    thousands(){
      return typeof this.number==='number'?this.number.toLocaleString():this.number;
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  width: 100%;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  .list{
    border: 1px solid #0c1865;
    background: #164088;
    margin-right: 30px;
    padding: 20px 40px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .count{
      color: #ffffff;
      font-size: 30px;
    }
    .name{
      color: #ffffff;
    }
  }
}
</style>
